<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<link rel="stylesheet" type="text/css" href="../../css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/list.css"/>

		<!--jquery/3.5.1-->
		<!--以下的js和css需要在联网的时候使用，否则就会有问题，最好是下载下来，放在本地-->
		<!--<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.17.1/bootstrap-table.min.css" rel="stylesheet">
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">-->
		<!--<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>-->
		<!--<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.17.1/bootstrap-table.min.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.17.1/locale/bootstrap-table-zh-CN.min.js"></script>-->

		<!--<link href="/bootstrap-table/dist/bootstrap-table.min.css" rel="stylesheet">
		<link href="/bootstrap-4.0.0/dist/css/bootstrap.min.css">
		<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
		<script src="/bootstrap-4.0.0/dist/js/bootstrap.min.js"></script>
		<script src="/bootstrap-table/dist/bootstrap-table.min.js"></script>
		<script src="/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>-->


		<!--<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.17.1/dist/bootstrap-table.min.css">
		<link href="/bootstrap-4.0.0/dist/css/bootstrap.min.css">
		<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
		<script src="/bootstrap-4.0.0/dist/js/bootstrap.min.js"></script>
		&lt;!&ndash; Latest compiled and minified JavaScript &ndash;&gt;
		<script src="https://unpkg.com/bootstrap-table@1.17.1/dist/bootstrap-table.min.js"></script>
		&lt;!&ndash; Latest compiled and minified Locales &ndash;&gt;
		<script src="https://unpkg.com/bootstrap-table@1.17.1/dist/locale/bootstrap-table-zh-CN.min.js"></script>-->


		<!--<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.css">
		<script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script>-->


		<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.17.1/dist/bootstrap-table.min.css">
		<!-- Latest compiled and minified CSS -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
		<!-- Optional theme -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
		<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
		<!-- Latest compiled and minified JavaScript -->
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
		<!-- Latest compiled and minified JavaScript -->
		<script src="https://unpkg.com/bootstrap-table@1.17.1/dist/bootstrap-table.min.js"></script>
		<!-- Latest compiled and minified Locales -->
		<script src="https://unpkg.com/bootstrap-table@1.17.1/dist/locale/bootstrap-table-zh-CN.min.js"></script>


	</head>
	<body>
		<table id="express_list"></table>
		<script>
			// 这个方法主要就是进行向服务器传递参数
			$(function () {
				$("#express_list").bootstrapTable({
					// 本来是前端程序员的工作，进行相应的配置
					// 例如怎么分页，有哪些行哪些页显示
					url:"/express/list.do", //数据地址
					striped:true, //是否显示行的间隔
					pageNumber:1, //初始化加载第几页
					pagination:true,//是否分页
					sidePagination:'server',//服务器分也还是客户端分页
					pageSize:5,//每一页展示的数量
					pageList:[5,10,20],//可选的单页记录数
					showRefresh:true,//可以刷新，以防卡住
					queryParams:function (params) {// 向服务器发送的数据
						var temp = {
							offset:params.offset,
							pageNumber:params.limit
						};
						return temp;
					},
					columns:[//服务器返回的数据，是一个个的对象，每一个对象对应一个列
						{
							title:"编号",
							field:"id",//把id的数据取出来，以编号进行显示
							sortable:false
						},{
							title:"单号",
							field:"number",//把id的数据取出来，以编号进行显示
							sortable:false
						},{
							title:"名称",
							field:"username",//把id的数据取出来，以编号进行显示
							sortable:false
						},{
							title:"电话号码",
							field:"userPhone",//把id的数据取出来，以编号进行显示
							sortable:false
						},{
							title:"承运公司",
							field:"company",//把id的数据取出来，以编号进行显示
							sortable:false
						},{
							title:"取件码",
							field:"code",//把id的数据取出来，以编号进行显示
							sortable:false
						},{
							title:"入库时间",
							field:"inTime",//把id的数据取出来，以编号进行显示
							sortable:false
						},{
							title:"取件时间",
							field:"outTime",//把id的数据取出来，以编号进行显示
							sortable:false
						},{
							title:"录入人员电话",
							field:"sysPhone",//把id的数据取出来，以编号进行显示
							sortable:false
						},{
							title:"快件状态",
							field:"status",//把id的数据取出来，以编号进行显示
							sortable:false
						},
					],

				});
			});

		</script>
	</body>
</html>
